<template>
  <el-popover :title="selectId" class="auto-width-popover" width="auto !important;" trigger="click" placement="top">
    <template #reference>
      <el-link>{{ selectId }}</el-link>
    </template>
    <template #default>
      <div class="option-content">
        <div class="option-labels">
          <span class="label chinese"><vp-label zh="中文描述" en="CN Desc." />： {{ dataInfo.zwms }}</span>
          <span class="label english"><vp-label zh="英文描述" en="EN Desc." />： {{ dataInfo.ywms }}</span>
        </div>
      </div>
    </template>
  </el-popover>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
import request from '/@/utils/request'

export default defineComponent({
  name: 'basedataAtaLink',
  props: {
    selectId: {
      type: String,
      default: '',
    },
  },
  setup(props, context) {
    const state = reactive({
      dataInfo: {} as any,
    })
    const getInfo = (id: string) => {
      request.get('/basicData/ata/zjh/' + id).then(res => {
        state.dataInfo = res?.data || []
      })
    }

    watch(() => [props.selectId], () => {
      getInfo(props.selectId)
    })

    return {
      ...toRefs(state),
      ...toRefs(props),
    }
  }
})
</script>
<style scoped lang="scss">
/* 优化内容样式 */
.option-labels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label {
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.5;
}

.label.chinese {
  color: #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
}

.label.english {
  color: #52c41a;
  background-color: rgba(82, 196, 26, 0.1);
}

.label:empty {
  display: none;
}
</style>